﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="QQMail1.aspx.cs" Inherits="repeater_QQMail1" %>

<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin"
	TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.web.jqueryui"
	TagPrefix="je" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
	<title>QQ 邮箱分组排序</title>
	<link rel="stylesheet" type="text/css" href="../css/smoothness/jquery-ui-1.8.15.custom.css" />
	<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.15.custom.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/main.css" />
	<style type="text/css">
		.group-header
		{
			cursor: default;
			color: blue;
		}
		.mail-title
		{
			cursor: default;
		}
		.group
		{
			font-size: larger;
			background-color: White;
		}
		.sender
		{
			color: Blue;
		}
		#pageindex
		{
			color: #009900;
			width: 20px;
		}
	</style>
	<script type="text/javascript">
		function convertGroupField(groupfield) {
			switch (groupfield) {
				case 'displaydate':
					return '<strong>时间</strong>';
				case 'sender':
					return '<strong>发送人</strong>';
			}
		}
	</script>
</head>
<body>
	<form id="formQQMail1" runat="server">
	<div class="title purple-title">
		QQ 邮箱分组排序
		<iframe src="../about.htm" frameborder="0" height="160" width="100%" allowtransparency="true" scrolling="no"></iframe>
	</div>
	<div class="content">
		<h2>
			说明
		</h2>
		<blockquote>
			请点击 发送人 或者 时间 排序分组.<br />
			<br />
			<strong>视频解说:</strong> <a href="http://www.tudou.com/programs/view/5KYgMnAdG6A/"
				target="_blank">www.tudou.com/programs/view/5KYgMnAdG6A/</a>
		</blockquote>
		<h2>
			示例
		</h2>
		<blockquote>
			<table id="list" cellpadding="5" cellspacing="5">
				<je:Repeater ID="mailRepeater" runat="server" Selector="'#list'" PageSize="4" IsVariable="true"
					GroupField="displaydate" FillAsync-Url="webservice.asmx" FillAsync-MethodName="FillMailList">
					<HeaderTemplate>
						<thead class="header">
							<tr>
								<td>
									&nbsp;
								</td>
								<td class="group-header" je-onclick="setgroup,'sender';togglesort,'sender'">
									发送人<span je-class="{sort,sender,,ui-icon ui-icon-arrow-1-n icon,ui-icon ui-icon-arrow-1-s icon}"></span>
								</td>
								<td>
									标题
								</td>
								<td class="group-header" je-onclick="setgroup,'displaydate';togglesort,'displaydate'">
									时间<span je-class="{sort,displaydate,,ui-icon ui-icon-arrow-1-n icon,ui-icon ui-icon-arrow-1-s icon}"></span>
								</td>
							</tr>
						</thead>
					</HeaderTemplate>
					<GroupTemplate>
						<tr>
							<td colspan="4" class="group">
								@{groupfield,convertGroupField(@)}: @{groupname}
							</td>
						</tr>
					</GroupTemplate>
					<ItemTemplate>
						<tr>
							<td>
								<input type="checkbox" je-checked="selected" je-onclick="toggleselect,false" />
							</td>
							<td class="sender">
								#{sender}
							</td>
							<td onclick="javascript:alert('#{title} 的内容!!!');" class="mail-title">
								<strong>#{title}</strong>
							</td>
							<td>
								<strong>#{displaydate}</strong> #{receivedate,jQuery.panzer.formatDate(#,'yyyy-MM-dd
								h:m')}
							</td>
						</tr>
					</ItemTemplate>
					<FooterTemplate>
						<tfoot>
							<tr>
								<td colspan="2">
									<a href="#" je-onclick="selectall">全选</a> <a href="#" je-onclick="prev">上一页</a>&nbsp;&nbsp;<a
										href="#" je-onclick="next">下一页</a>,&nbsp; 第 @{pageindex}/@{pagecount} 页, 共 @{itemcount}
									条, <a href="#" je-onclick="goto,new Number(jQuery('#pageindex').val())">跳转</a> 到第
									<input type="text" id="pageindex" value="@{pageindex}" />
									页.
								</td>
							</tr>
						</tfoot>
					</FooterTemplate>
				</je:Repeater>
			</table>
		</blockquote>
	</div>
	</form>
</body>
</html>
<script type="text/javascript">
	$(function () {
		mailRepeater.__repeater('fill');
	});
</script>
